<template>
  <div>
    <n-grid cols="5" x-gap="20">
      <n-gi>
        <div>
          <search-form title="商品查询" :form="form" @search="onSearch"></search-form>
        </div>
      </n-gi>
      <n-gi span="4">
        <ocean :use="buttons" style="margin-bottom: 10px"></ocean>
        <n-grid cols="5" x-gap="20" y-gap="20">
          <n-gi v-for="goods in goodsList">
            <goods-card :goods="goods" @edit="onGoodsEdit" @remove="onGoodsRemove" @editOpt="onGoodsEditOpt"
              @status="updateStatus" @recommend="setRecommend"></goods-card>
          </n-gi>
        </n-grid>
        <n-space justify="center" class="theme_box" style="margin-top: 20px; padding: 10px 0">
          <ocean :use="pagination"></ocean>
        </n-space>
      </n-gi>
    </n-grid>
    <ocean :use="drawer"></ocean>
    <ocean :use="Optdrawer"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { useForm, usePagination, useButton, useDrawer } from '@/ocean';
import { ref } from 'vue';
import { useMessage, useDialog } from 'naive-ui';
import { GoodsAPI } from '@/app/api';
import SearchForm from '@/components/searchForm.vue';
import GoodsCard from './components/goodsCard.vue';
import GoodsForm from './form/goods.vue';
import GoodsOptForm from './form/goodsOpt.vue';

let message = useMessage();
let dialog = useDialog();

let form = useForm<{
  goodsName: string;
  status: string;
  advice: string
}>();
form.item('商品名称', 'goodsName').input();
form.item('商品状态', 'status').select({ options: [{ label: '上架', value: 1 }, { label: '下架', value: 2 }], clearable: true });
form.item('推荐商品', 'advice').select({ options: [{ label: '是', value: 1 }, { label: '否', value: 0 }], clearable: true });

let drawer = useDrawer('编辑商品', GoodsForm, { size: 'large' });

let Optdrawer = useDrawer('编辑规格', GoodsOptForm, { width: '1000px' });
Optdrawer.button('确认', { type: 'primary' }).click(() => {
  let { submit } = Optdrawer.getRef();
  submit().then(() => {
    message.success('操作成功');
    Optdrawer.close();
  });
});

Optdrawer.button('取消').click(() => {
  Optdrawer.close();
});

drawer.button('确认', { type: 'primary' }).click(() => {
  let { submit } = drawer.getRef();
  submit().then(() => {
    message.success('操作成功');
    queryGoodsList();
    drawer.close();
  });
});

drawer.button('取消').click(() => {
  drawer.close();
});

let pagination = usePagination({
  onUpdated() {
    queryGoodsList();
  }
});

let buttons = useButton({ type: 'group' });
buttons.button('添加商品', { type: 'primary' }).click(() => {
  drawer.setTitle('添加商品').open();
});

let goodsList = ref([]);
let queryGoodsList = () => {
  let pageData = pagination.getPageData();
  let formData = form.model;
  GoodsAPI.queryGoodsList({ ...formData, ...pageData }).then(res => {
    goodsList.value = res.data;
    pagination.setCount(res.total)
  });
};

const onSearch = () => {
  pagination.setPage(1);
  queryGoodsList();
};

const onGoodsEdit = goods => {
  drawer.setTitle('编辑商品').open({ goods });
};
const onGoodsEditOpt = goods => {
  Optdrawer.setTitle('编辑规格').open({ goodsId: goods.id });
};

let deleteGoods = goods => {
  dialog.warning({
    title: '提示',
    content: '是否确认删除商品：' + goods.goodsName,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      GoodsAPI.delGoods({ id: goods.id }).then((res) => {
        if (res.code) { message.warning(res.msg) }
        message.success('删除成功');
        queryGoodsList();
      });
    }
  });
};

const onGoodsRemove = goods => {
  deleteGoods(goods);
};
const updateStatus = goods => {
  GoodsAPI.updateStatus({ goodsId: goods.id }).then((res) => {
    if (res.code) { message.warning(res.msg) }
    message.success('操作成功');
    queryGoodsList();
  });
}

const setRecommend = goods => {
  GoodsAPI.goodsReco({ goodsId: goods.id }).then(res => {
    message.success('操作成功');
    queryGoodsList();
  })
}

queryGoodsList();
</script>
